/*page-utilities in page-content*/
.page-utilities {
  &.shine {
    .item {
      animation: 300ms shine linear 0ms;
      animation-iteration-count: 15;
    }
  }
  .item {
    display: inline-block;
    color: rgba(255, 255, 255, .9);
    width: 11em;
    height: 30px;
    line-height: 30px;
    border: 2px dashed rgba(240, 160, 80, .3);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .3) inset;
    background-color: rgba(0, 0, 0, .2);
    border-radius: 20px 20px 0 0;
    transition: all 500ms linear;
    user-select: none;
    &:hover {
      color: rgba(255, 255, 255, 1);
      /*width: 15em;*/
      border-color: rgba(240, 160, 80, 0.9);
      box-shadow: 0 0 0 2px rgba(0, 0, 0, .1) inset;
      background-color: rgba(0, 0, 0, .5);
      border-radius: 80px 80px 0 0;
      cursor: pointer;
    }
  }
}

@media screen and (max-width: 979px) {
  .page-utilities {
    margin-top: 20px;
    .item {
      display: none;
      &:nth-of-type(2) {
        display: inline-block;
      }
    }
  }
}

.clearfix() {
  &:after {
    content: '';
    clear: both;
    display: block;
    visibility: hidden;
    opacity: 0;
    height: 0;
  }
}

@keyframes shine {
  0% {
    box-shadow: -4px -4px 4px 1px rgba(255, 255, 0, 1);
  }
  25% {
    box-shadow: 4px -4px 4px 1px rgba(255, 255, 0, 1);
  }
  50% {
    box-shadow: 4px 4px 4px 1px rgba(255, 255, 0, 1);
  }
  75% {
    box-shadow: -4px 4px 4px 1px rgba(255, 255, 0, 1);
  }
  100% {
    box-shadow: -4px -4px 4px 1px rgba(255, 255, 0, 1);
  }
}